<template>
  <div class="content">
    <div class="href">
      <div class="link">首页</div>
      <icon name="iconxiangyoubeifen16" size="14" />
      <div class="link">品牌街</div>
    </div>
    <div class="banner"></div>
    <div class="list">
      <GoodsItem2
        :brand="item"
        v-for="(item, index) in brandList"
        :key="index"
      />
    </div>
    <div class="no-more" v-if="no_more">没有更多了..</div>
  </div>
</template>

<script>
import api from "@/api";
import GoodsItem2 from "@/components/GoodsItem/GoodsItem2.vue";
export default {
  name: "BrandAction",
  components: { GoodsItem2 },
  data() {
    return {
      brandList: [],
      current: 1,
      length: 16,
      no_more: false,
    };
  },
  created() {
    this.getBranList();
  },
  mounted() {
    window.addEventListener("scroll", this.onScroll);
  },
  methods: {
    async getBranList() {
      let list = await api.BRAND_LIST({
        current: this.current,
        length: this.length,
      });
      if (list.data.length) {
        this.brandList.push(...list.data);
        this.current++;
      } else {
        this.no_more = true;
      }
    },
    onScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollHeight - (windowHeight + scrollTop) < 100) {
        !this.no_more && this.getBranList();
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.onScroll);
  },
};
</script>

<style lang="scss" scoped>
.content {
  max-width: 1200px;
  margin: 0 auto;
  .href {
    font-size: 0;
    line-height: 22px;
    margin: 20px 0;
    i {
      padding: 0 10px;
      vertical-align: inherit;
    }
    .link {
      display: inline-block;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
    }
  }
  .banner {
    height: 200px;
    background: #000;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  .list {
    margin-bottom: 0;
    & div:nth-child(4n + 1) {
      margin-left: 0;
    }
  }
  .no-more {
    margin-bottom: 20px;
    text-align: center;
    color: #999;
  }
}
</style>
